<template>
	<div>
		<el-dialog
			title="根据班级生成小组"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose">
			<el-form label-position="left" :rules="formRules.departmentFrom" ref="departmentForm" label-width="80px">
				<el-form-item label="小组名称">
					<el-input v-model="groupName"/>
				</el-form-item>
        <el-form-item label="导师名称">
					<template>
            <el-select v-model="select1" placeholder="请选择导师">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.teachername"
                :value="item.teacherid">
              </el-option>
            </el-select>
          </template>
				</el-form-item>
        <el-form-item label="班级名称">
					<template>
            <el-select
              v-model="select2"
              collapse-tags
              placeholder="请选择班级">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.classname"
                :value="item.classid">
              </el-option>
            </el-select>
          </template>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
    		<el-button type="primary" @click="onAddGroup" v-loading="loading">确 定</el-button>
  		</span>
		</el-dialog>
	</div>
</template>

<script>
  import * as groupManage from '@/api/groupManage';

  export default {
    name: 'addDialog',
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      isEdit: {
        type: Boolean
      },
      departmentData: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        loading: false,
        groupName: '',
        options1: [],
        options2: [],
        select1: '',
        select2: ''
      }
    },
    methods: {
      async onAddGroup () {
        try {
          this.loading = true;
          const req = {
            groupname: this.groupName,
            teacherid: this.select1,
            classid: this.select2
          }
          await groupManage.addClassGroup(req);
          this.handleFresh();
          this.handleClose();
        } catch (e) {
          this.$notify({
            title: '错误',
            type: 'error',
            message: '添加失败!'
          });
          console.log(e)
        } finally {
          this.loading = false;
        }
      },
      async getTeacherList () {
        const res = await groupManage.getTeacher({})
        this.options1 = res.msg
      },
      async getClassList () {
        const res = await groupManage.getClass({})
        this.options2 = res.msg
      },
      handleClose () {
        this.$emit('closeDialog');
      },
      handleFresh () {
        this.$emit('fresh');
      }
    },
    watch: {
      dialogVisible (newVal, oldVal) {
        if (newVal) {
          this.groupName = ''
          this.select2 = ''
          this.select1 = ''
        }
      }
    },
    created () {
      this.getTeacherList()
      this.getClassList()
    }
  }
</script>

<style scoped>
</style>